import React, { Component } from 'react'


import index from './index.module.css'
export default class ListItem extends Component {
    state={
        move:false
    }
    updataTodo = (id) => {
        return (event) => {
            let checked = event.target.checked;
            this.props.updataTodo(checked, id)
        }
    }
    isOvertodo = ()=> {
        this.setState({move:true})
    }
    notOvertodo = ()=> {
        this.setState({move:false})
    }

    delectTodo = (id)=>{
        return ()=>{
            this.props.delectTodo(id)
        }
    }
    render() {
        const { name, checked, id } = this.props.todo
        let {move} = this.state
        return (
            <div className={index.listitem} onMouseEnter={this.isOvertodo} onMouseLeave={this.notOvertodo}>
                <label className={index.lable}>
                    <input type="checkbox" checked={checked} onChange={this.updataTodo(id)} />
                    <div>{name}</div>
                </label>
                <div style={{ display: move===true?'block':'none' }} className={index.delect} onClick={this.delectTodo(id)}>删除</div>

            </div>

        )
    }
}
